﻿@page "/sparkline/default-functionalities"

@using Syncfusion.Blazor.Charts

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes population, population density, population growth rate, and birth rate of various countries from 2005 to 2014.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render a sparkline in a table. The color and type of sparklines have been customized. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over the data points or tap on a data point in touch enabled devices.</p>
   <p>More information about sparkline can be found in this <a target='_blank' href='https://ej2.syncfusion.com/blazor/documentation/sparkline/getting-started'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="cols-sample-area" align="center">
        <div style="width: 400px; text-align: center; font-size: 17px">
            Population comparision between various countries
        </div>
        <div style="width: 380px; text-align: center; font-size: 12.5px;">
            (From 2005 to 2014)
        </div>
        <br>
        <br>
        <table class="cols-sample-area row" style="width: 100%;">
            <tr style="height: 80px">
                <td style="height: 50px;width: 200px;margin-left: 15px"></td>
                <td>
                    <div style="height: 50px;width: 200px;margin-left: 15px;text-align:center">
                        <b>Population</b>
                    </div>
                </td>
                <td>
                    <div style="height: 50px;width: 200px;margin-left: 15px;text-align:center">
                        <b>Population Density</b>
                    </div>
                </td>
                <td>
                    <div style="height: 50px;width: 200px;margin-left: 15px;text-align:center">
                        <b>Population Growth Rate</b>
                    </div>
                </td>
                <td>
                    <div style="height: 50px;width: 150px;margin-left: 15px;text-align:center">
                        <b>Birth Rate</b>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 200px;margin-left: 10px;text-align:center">
                    <b>Australia</b>
                </td>
                <td>
                    <div id="p-australia" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInAustralia Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-australia" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInAustralia Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-australia" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInAustralia Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2"Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-australia" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkData" DataSource=@BirthRateInAustralia Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkData" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>Canada</b>
                </td>
                <td>
                    <div id="p-canada" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInCanada Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-canada" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInCanada Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-canada" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInCanada Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-canada" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInCanada Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>China</b>
                </td>
                <td>
                    <div id="p-china" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInChina Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-china" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInChina Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-china" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInChina Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-china" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInChina Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>France</b>
                </td>
                <td>
                    <div id="p-france" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInFrance Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-france" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInFrance Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-france" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInFrance Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-france" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInFrance Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true">
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>Germany</b>
                </td>
                <td>
                    <div id="p-germany" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInGermany Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-germany" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInGermany Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-germany" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInGermany Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-germany" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInGermany Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>India</b>
                </td>
                <td>
                    <div id="p-india" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInIndia Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-india" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInIndia Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-india" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInIndia Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-india" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInIndia Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>Russia</b>
                </td>
                <td>
                    <div id="p-russia" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInRussia Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-russia" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInRussia Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-russia" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInRussia Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-russia" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInRussia Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>Sweden</b>
                </td>
                <td>
                    <div id="p-sweden" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInSweden Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-sweden" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInSweden Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-sweden" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInSweden Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-sweden" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInSweden Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>United Kingdom</b>
                </td>
                <td>
                    <div id="p-uk" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInUK Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-uk" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInUK Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-uk" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInUK Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-uk" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInUK Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>
            <tr style="height: 80px">
                <td style="height: 50px;width: 250px;margin-left: 10px;text-align:center">
                    <b>United Sates</b>
                </td>
                <td>
                    <div id="p-us" style="height: 50px;width: 200px;margin-left: 55px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationInUS Type="@Syncfusion.Blazor.Charts.SparklineType.Line" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                                <SparklineTrackLineSettings Visible='true' Color="#fc5070" Width="2">
                                </SparklineTrackLineSettings>
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="d-us" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationDensityInUS Type="@Syncfusion.Blazor.Charts.SparklineType.Area" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineBorder Color="#fc5070" Width="2"></SparklineBorder>
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="g-us" style="height: 50px;width: 200px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" DataSource=@PopulationGrowthRateInUS Type="@Syncfusion.Blazor.Charts.SparklineType.WinLoss" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
                <td>
                    <div id="b-us" style="height: 50px;width: 150px;margin-left: 10px">
                        <SfSparkline XName="xval" YName="yval" ValueType="SparklineValueType.Category" Height="50px" Width="90%" TValue="SparkDataSource" DataSource=@BirthRateInUS Type="@Syncfusion.Blazor.Charts.SparklineType.Column" Fill="#3C78EF" NegativePointColor="#fc5070" LineWidth="2" Format="n" EnableGroupingSeparator="true" >
                            <SparklineTooltipSettings TValue="SparkDataSource" Visible='true' Format="${xval} : ${yval}">
                            </SparklineTooltipSettings>
                        </SfSparkline>
                    </div>
                </td>
            </tr>

        </table>
    </div>
</div>
<style>
    td {
        width: 20%;
    }
</style>

@code {
    public class SparkDataSource
    {
        public double x { get; set; }
        public string xval { get; set; }
        public double yval { get; set; }
    }
    public class SparkData
    {
        public double x { get; set; }
        public string xval { get; set; }
        public double yval { get; set; }
    }

    public List<SparkDataSource> PopulationInAustralia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 20090440 },
        new SparkDataSource { x= 1, xval= "2006", yval= 20264080 },
        new SparkDataSource { x= 2, xval= "2007", yval= 20434180 },
        new SparkDataSource { x= 3, xval= "2008", yval= 21007310 },
        new SparkDataSource { x= 4, xval= "2009", yval= 21262640 },
        new SparkDataSource { x= 5, xval= "2010", yval= 21515750 },
        new SparkDataSource { x= 6, xval= "2011", yval= 21766710 },
        new SparkDataSource { x= 7, xval= "2012", yval= 22015580 },
        new SparkDataSource { x= 8, xval= "2013", yval= 22262500 },
        new SparkDataSource { x= 9, xval= "2014", yval= 22507620 } };

    public List<SparkDataSource> PopulationDensityInAustralia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 2.61 },
        new SparkDataSource { x= 1, xval= "2006", yval= 2.64 },
        new SparkDataSource { x= 2, xval= "2007", yval= 2.66 },
        new SparkDataSource { x= 3, xval= "2008", yval= 2.73 },
        new SparkDataSource { x= 4, xval= "2009", yval= 2.75 },
        new SparkDataSource { x= 5, xval= "2010", yval= 2.78 },
        new SparkDataSource { x= 6, xval= "2011", yval= 2.81 },
        new SparkDataSource { x= 7, xval= "2012", yval= 2.84 },
        new SparkDataSource { x= 8, xval= "2013", yval= 2.88 },
        new SparkDataSource { x= 9, xval= "2014", yval= 2.91 } };

    public List<SparkDataSource> PopulationGrowthRateInAustralia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= -1 },
        new SparkDataSource { x= 2, xval= "2007", yval= -1 },
        new SparkDataSource { x= 3, xval= "2008", yval= 1 },
        new SparkDataSource { x= 4, xval= "2009", yval= -1 },
        new SparkDataSource { x= 5, xval= "2010", yval= -1 },
        new SparkDataSource { x= 6, xval= "2011", yval= -1 },
        new SparkDataSource { x= 7, xval= "2012", yval= -1 },
        new SparkDataSource { x= 8, xval= "2013", yval= -1 },
        new SparkDataSource { x= 9, xval= "2014", yval= -1 }
    };

    public List<SparkData> BirthRateInAustralia = new List<SparkData> {
        new SparkData { x= 0, xval= "2005", yval= 12.26 },
        new SparkData { x= 1, xval= "2006", yval= 12.14 },
        new SparkData { x= 2, xval= "2007", yval= 12.02 },
        new SparkData { x= 3, xval= "2008", yval= 12.55 },
        new SparkData { x= 4, xval= "2009", yval= 12.47 },
        new SparkData { x= 5, xval= "2010", yval= 12.39 },
        new SparkData { x= 6, xval= "2011", yval= 12.33 },
        new SparkData { x= 7, xval= "2012", yval= 12.28 },
        new SparkData { x= 8, xval= "2013", yval= 12.23 },
        new SparkData { x= 9, xval= "2014", yval= 12.19 }
    };

    public List<SparkDataSource> PopulationInCanada = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 32805040 },
        new SparkDataSource { x= 1, xval= "2006", yval= 33098930 },
        new SparkDataSource { x= 2, xval= "2007", yval= 33390140 },
        new SparkDataSource { x= 3, xval= "2008", yval= 33212700 },
        new SparkDataSource { x= 4, xval= "2009", yval= 33487210 },
        new SparkDataSource { x= 5, xval= "2010", yval= 33759740 },
        new SparkDataSource { x= 6, xval= "2011", yval= 34030590 },
        new SparkDataSource { x= 7, xval= "2012", yval= 34300080 },
        new SparkDataSource { x= 8, xval= "2013", yval= 34568210 },
        new SparkDataSource { x= 9, xval= "2014", yval= 34834840 }
    };

    public List<SparkDataSource> PopulationDensityInCanada = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 3.29 },
        new SparkDataSource { x= 1, xval= "2006", yval= 3.31 },
        new SparkDataSource { x= 2, xval= "2007", yval= 3.34 },
        new SparkDataSource { x= 3, xval= "2008", yval= 3.33 },
        new SparkDataSource { x= 4, xval= "2009", yval= 3.35 },
        new SparkDataSource { x= 5, xval= "2010", yval= 3.38 },
        new SparkDataSource { x= 6, xval= "2011", yval= 3.41 },
        new SparkDataSource { x= 7, xval= "2012", yval= 3.44 },
        new SparkDataSource { x= 8, xval= "2013", yval= 3.46 },
        new SparkDataSource { x= 9, xval= "2014", yval= 3.49 }
    };

    public List<SparkDataSource> PopulationGrowthRateInCanada = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= -1 },
        new SparkDataSource { x= 2, xval= "2007", yval= -1 },
        new SparkDataSource { x= 3, xval= "2008", yval= -1 },
        new SparkDataSource { x= 4, xval= "2009", yval= -1 },
        new SparkDataSource { x= 5, xval= "2010", yval= -1 },
        new SparkDataSource { x= 6, xval= "2011", yval= -1 },
        new SparkDataSource { x= 7, xval= "2012", yval= -1 },
        new SparkDataSource { x= 8, xval= "2013", yval= -1 },
        new SparkDataSource { x= 9, xval= "2014", yval= -1 }
    };

    public List<SparkDataSource> BirthRateInCanada = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 10.84 },
        new SparkDataSource { x= 1, xval= "2006", yval= 10.78 },
        new SparkDataSource { x= 2, xval= "2007", yval= 10.75 },
        new SparkDataSource { x= 3, xval= "2008", yval= 10.29 },
        new SparkDataSource { x= 4, xval= "2009", yval= 10.28 },
        new SparkDataSource { x= 5, xval= "2010", yval= 10.28 },
        new SparkDataSource { x= 6, xval= "2011", yval= 10.28 },
        new SparkDataSource { x= 7, xval= "2012", yval= 10.28 },
        new SparkDataSource { x= 8, xval= "2013", yval= 10.28 },
        new SparkDataSource { x= 9, xval= "2014", yval= 10.29 }
    };

    public List<SparkDataSource> PopulationInChina = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1306314000 },
        new SparkDataSource { x= 1, xval= "2006", yval= 1313974000 },
        new SparkDataSource { x= 2, xval= "2007", yval= 1321852000 },
        new SparkDataSource { x= 3, xval= "2008", yval= 1330045000 },
        new SparkDataSource { x= 4, xval= "2009", yval= 1338613000 },
        new SparkDataSource { x= 5, xval= "2010", yval= 1330141000 },
        new SparkDataSource { x= 6, xval= "2011", yval= 1336718000 },
        new SparkDataSource { x= 7, xval= "2012", yval= 1343240000 },
        new SparkDataSource { x= 8, xval= "2013", yval= 1349586000 },
        new SparkDataSource { x= 9, xval= "2014", yval= 1355693000 }
    };

    public List<SparkDataSource> PopulationDensityInChina = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 136.12 },
        new SparkDataSource { x= 1, xval= "2006", yval= 136.92 },
        new SparkDataSource { x= 2, xval= "2007", yval= 137.74 },
        new SparkDataSource { x= 3, xval= "2008", yval= 138.59 },
        new SparkDataSource { x= 4, xval= "2009", yval= 139.48 },
        new SparkDataSource { x= 5, xval= "2010", yval= 138.6 },
        new SparkDataSource { x= 6, xval= "2011", yval= 139.29 },
        new SparkDataSource { x= 7, xval= "2012", yval= 139.97 },
        new SparkDataSource { x= 8, xval= "2013", yval= 140.63 },
        new SparkDataSource { x= 9, xval= "2014", yval= 141.26 }
    };

    public List<SparkDataSource> PopulationGrowthRateInChina = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= 1 },
        new SparkDataSource { x= 2, xval= "2007", yval= 1 },
        new SparkDataSource { x= 3, xval= "2008", yval= 1 },
        new SparkDataSource { x= 4, xval= "2009", yval= 1 },
        new SparkDataSource { x= 5, xval= "2010", yval= -1 },
        new SparkDataSource { x= 6, xval= "2011", yval= 0 },
        new SparkDataSource { x= 7, xval= "2012", yval= -1 },
        new SparkDataSource { x= 8, xval= "2013", yval= -1 },
        new SparkDataSource { x= 9, xval= "2014", yval= -1 }
    };

    public List<SparkDataSource> BirthRateInChina = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 13.14 },
        new SparkDataSource { x= 1, xval= "2006", yval= 13.25 },
        new SparkDataSource { x= 2, xval= "2007", yval= 13.45 },
        new SparkDataSource { x= 3, xval= "2008", yval= 13.71 },
        new SparkDataSource { x= 4, xval= "2009", yval= 14 },
        new SparkDataSource { x= 5, xval= "2010", yval= 12.17 },
        new SparkDataSource { x= 6, xval= "2011", yval= 12.29 },
        new SparkDataSource { x= 7, xval= "2012", yval= 12.31 },
        new SparkDataSource { x= 8, xval= "2013", yval= 12.25 },
        new SparkDataSource { x= 9, xval= "2014", yval= 12.17 }
    };

    public List<SparkDataSource> PopulationInFrance = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 60656180 },
        new SparkDataSource { x= 1, xval= "2006", yval= 60876140 },
        new SparkDataSource { x= 2, xval= "2007", yval= 63713930 },
        new SparkDataSource { x= 3, xval= "2008", yval= 64057790 },
        new SparkDataSource { x= 4, xval= "2009", yval= 64057790 },
        new SparkDataSource { x= 5, xval= "2010", yval= 64768390 },
        new SparkDataSource { x= 6, xval= "2011", yval= 65312250 },
        new SparkDataSource { x= 7, xval= "2012", yval= 65630690 },
        new SparkDataSource { x= 8, xval= "2013", yval= 65951610 },
        new SparkDataSource { x= 9, xval= "2014", yval= 66259010 }
    };

    public List<SparkDataSource> PopulationDensityInFrance = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 110.88 },
        new SparkDataSource { x= 1, xval= "2006", yval= 111.28 },
        new SparkDataSource { x= 2, xval= "2007", yval= 99.02 },
        new SparkDataSource { x= 3, xval= "2008", yval= 99.56 },
        new SparkDataSource { x= 4, xval= "2009", yval= 99.56 },
        new SparkDataSource { x= 5, xval= "2010", yval= 100.66 },
        new SparkDataSource { x= 6, xval= "2011", yval= 101.45 },
        new SparkDataSource { x= 7, xval= "2012", yval= 101.94 },
        new SparkDataSource { x= 8, xval= "2013", yval= 102.44 },
        new SparkDataSource { x= 9, xval= "2014", yval= 102.92 }
    };

    public List<SparkDataSource> PopulationGrowthRateInFrance = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= -1 },
        new SparkDataSource { x= 2, xval= "2007", yval= 1 },
        new SparkDataSource { x= 3, xval= "2008", yval= -1 },
        new SparkDataSource { x= 4, xval= "2009", yval= -1 },
        new SparkDataSource { x= 5, xval= "2010", yval= -1 },
        new SparkDataSource { x= 6, xval= "2011", yval= -1 },
        new SparkDataSource { x= 7, xval= "2012", yval= 0 },
        new SparkDataSource { x= 8, xval= "2013", yval= -1 },
        new SparkDataSource { x= 9, xval= "2014", yval= -1 }
    };

    public List<SparkDataSource> BirthRateInFrance = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 12.15 },
        new SparkDataSource { x= 1, xval= "2006", yval= 11.99 },
        new SparkDataSource { x= 2, xval= "2007", yval= 12.91 },
        new SparkDataSource { x= 3, xval= "2008", yval= 12.73 },
        new SparkDataSource { x= 4, xval= "2009", yval= 12.57 },
        new SparkDataSource { x= 5, xval= "2010", yval= 12.43 },
        new SparkDataSource { x= 6, xval= "2011", yval= 12.29 },
        new SparkDataSource { x= 7, xval= "2012", yval= 12.72 },
        new SparkDataSource { x= 8, xval= "2013", yval= 12.6 },
        new SparkDataSource { x= 9, xval= "2014", yval= 12.6 }
    };


    public List<SparkDataSource> PopulationInGermany = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 82431390 },
        new SparkDataSource { x= 1, xval= "2006", yval= 82422300 },
        new SparkDataSource { x= 2, xval= "2007", yval= 82400990 },
        new SparkDataSource { x= 3, xval= "2008", yval= 82369550 },
        new SparkDataSource { x= 4, xval= "2009", yval= 82329760 },
        new SparkDataSource { x= 5, xval= "2010", yval= 82282990 },
        new SparkDataSource { x= 6, xval= "2011", yval= 81471830 },
        new SparkDataSource { x= 7, xval= "2012", yval= 81305860 },
        new SparkDataSource { x= 8, xval= "2013", yval= 81147260 },
        new SparkDataSource { x= 9, xval= "2014", yval= 80996690 }
    };

    public List<SparkDataSource> PopulationDensityInGermany = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 230.89 },
        new SparkDataSource { x= 1, xval= "2006", yval= 230.86 },
        new SparkDataSource { x= 2, xval= "2007", yval= 230.8 },
        new SparkDataSource { x= 3, xval= "2008", yval= 230.71 },
        new SparkDataSource { x= 4, xval= "2009", yval= 230.6 },
        new SparkDataSource { x= 5, xval= "2010", yval= 230.47 },
        new SparkDataSource { x= 6, xval= "2011", yval= 228.2 },
        new SparkDataSource { x= 7, xval= "2012", yval= 227.73 },
        new SparkDataSource { x= 8, xval= "2013", yval= 227.29 },
        new SparkDataSource { x= 9, xval= "2014", yval= 226.87 }
    };

    public List<SparkDataSource> PopulationGrowthRateInGermany = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 0 },
        new SparkDataSource { x= 1, xval= "2006", yval= 1 },
        new SparkDataSource { x= 2, xval= "2007", yval= -1 },
        new SparkDataSource { x= 3, xval= "2008", yval= -1 },
        new SparkDataSource { x= 4, xval= "2009", yval= -1 },
        new SparkDataSource { x= 5, xval= "2010", yval= -1 },
        new SparkDataSource { x= 6, xval= "2011", yval= 1 },
        new SparkDataSource { x= 7, xval= "2012", yval= 1 },
        new SparkDataSource { x= 8, xval= "2013", yval= 1 },
        new SparkDataSource { x= 9, xval= "2014", yval= 1 }
    };

    public List<SparkDataSource> BirthRateInGermany = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 8.33 },
        new SparkDataSource { x= 1, xval= "2006", yval= 8.25 },
        new SparkDataSource { x= 2, xval= "2007", yval= 8.2 },
        new SparkDataSource { x= 3, xval= "2008", yval= 8.18 },
        new SparkDataSource { x= 4, xval= "2009", yval= 8.18 },
        new SparkDataSource { x= 5, xval= "2010", yval= 8.21 },
        new SparkDataSource { x= 6, xval= "2011", yval= 8.3 },
        new SparkDataSource { x= 7, xval= "2012", yval= 8.33 },
        new SparkDataSource { x= 8, xval= "2013", yval= 8.37 },
        new SparkDataSource { x= 9, xval= "2014", yval= 8.42 }
    };

    public List<SparkDataSource> PopulationInIndia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1080264000 },
        new SparkDataSource { x= 1, xval= "2006", yval= 1095352000 },
        new SparkDataSource { x= 2, xval= "2007", yval= 1129866000 },
        new SparkDataSource { x= 3, xval= "2008", yval= 1147996000 },
        new SparkDataSource { x= 4, xval= "2009", yval= 1166079000 },
        new SparkDataSource { x= 5, xval= "2010", yval= 1173108000 },
        new SparkDataSource { x= 6, xval= "2011", yval= 1189173000 },
        new SparkDataSource { x= 7, xval= "2012", yval= 1205074000 },
        new SparkDataSource { x= 8, xval= "2013", yval= 1220800000 },
        new SparkDataSource { x= 9, xval= "2014", yval= 1236345000 }
    };

    public List<SparkDataSource> PopulationDensityInIndia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 328.59 },
        new SparkDataSource { x= 1, xval= "2006", yval= 333.18 },
        new SparkDataSource { x= 2, xval= "2007", yval= 343.68 },
        new SparkDataSource { x= 3, xval= "2008", yval= 349.19 },
        new SparkDataSource { x= 4, xval= "2009", yval= 354.73 },
        new SparkDataSource { x= 5, xval= "2010", yval= 356.86 },
        new SparkDataSource { x= 6, xval= "2011", yval=361.75 },
        new SparkDataSource { x= 7, xval= "2012", yval= 366.59 },
        new SparkDataSource { x= 8, xval= "2013", yval= 371.37 },
        new SparkDataSource { x= 9, xval= "2014", yval= 376.1 }
    };

    public List<SparkDataSource> PopulationGrowthRateInIndia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= -1 },
        new SparkDataSource { x= 2, xval= "2007", yval= 1 },
        new SparkDataSource { x= 3, xval= "2008", yval= -1 },
        new SparkDataSource { x= 4, xval= "2009", yval= -1 },
        new SparkDataSource { x= 5, xval= "2010", yval= -1 },
        new SparkDataSource { x= 6, xval= "2011", yval= -1 },
        new SparkDataSource { x= 7, xval= "2012", yval= -1 },
        new SparkDataSource { x= 8, xval= "2013", yval= -1 },
        new SparkDataSource { x= 9, xval= "2014", yval= -1 }
    };

    public List<SparkDataSource> BirthRateInIndia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 22.32 },
        new SparkDataSource { x= 1, xval= "2006", yval= 22.01 },
        new SparkDataSource { x= 2, xval= "2007", yval= 22.69 },
        new SparkDataSource { x= 3, xval= "2008", yval= 22.22 },
        new SparkDataSource { x= 4, xval= "2009", yval= 21.76 },
        new SparkDataSource { x= 5, xval= "2010", yval= 21.34 },
        new SparkDataSource { x= 6, xval= "2011", yval= 20.97 },
        new SparkDataSource { x= 7, xval= "2012", yval= 20.6 },
        new SparkDataSource { x= 8, xval= "2013", yval= 20.24 },
        new SparkDataSource { x= 9, xval= "2014", yval= 19.89 }
    };


    public List<SparkDataSource> PopulationInRussia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 143420300 },
        new SparkDataSource { x= 1, xval= "2006", yval= 142893500 },
        new SparkDataSource { x= 2, xval= "2007", yval= 141377800 },
        new SparkDataSource { x= 3, xval= "2008", yval= 140702100 },
        new SparkDataSource { x= 4, xval= "2009", yval= 140041200 },
        new SparkDataSource { x= 5, xval= "2010", yval= 139390200 },
        new SparkDataSource { x= 6, xval= "2011", yval= 138739900 },
        new SparkDataSource { x= 7, xval= "2012", yval= 142517700 },
        new SparkDataSource { x= 8, xval= "2013", yval= 142500500 },
        new SparkDataSource { x= 9, xval= "2014", yval= 142470300 }
    };

    public List<SparkDataSource> PopulationDensityInRussia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 8.4 },
        new SparkDataSource { x= 1, xval= "2006", yval= 8.37 },
        new SparkDataSource { x= 2, xval= "2007", yval= 8.28 },
        new SparkDataSource { x= 3, xval= "2008", yval= 8.24 },
        new SparkDataSource { x= 4, xval= "2009", yval= 8.19 },
        new SparkDataSource { x= 5, xval= "2010", yval= 8.15 },
        new SparkDataSource { x= 6, xval= "2011", yval= 8.11 },
        new SparkDataSource { x= 7, xval= "2012", yval= 8.34 },
        new SparkDataSource { x= 8, xval= "2013", yval= 8.33 },
        new SparkDataSource { x= 9, xval= "2014", yval= 8.33 }
    };

    public List<SparkDataSource> PopulationGrowthRateInRussia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= 0 },
        new SparkDataSource { x= 2, xval= "2007", yval= -1 },
        new SparkDataSource { x= 3, xval= "2008", yval= 1 },
        new SparkDataSource { x= 4, xval= "2009", yval= 0 },
        new SparkDataSource { x= 5, xval= "2010", yval= 0 },
        new SparkDataSource { x= 6, xval= "2011", yval= 0 },
        new SparkDataSource { x= 7, xval= "2012", yval= -1 },
        new SparkDataSource { x= 8, xval= "2013", yval= 1 },
        new SparkDataSource { x= 9, xval= "2014", yval= -1 }
    };

    public List<SparkDataSource> BirthRateInRussia = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 9.8 },
        new SparkDataSource { x= 1, xval= "2006", yval= 9.95 },
        new SparkDataSource { x= 2, xval= "2007", yval= 10.92 },
        new SparkDataSource { x= 3, xval= "2008", yval= 11.03 },
        new SparkDataSource { x= 4, xval= "2009", yval= 11.1 },
        new SparkDataSource { x= 5, xval= "2010", yval= 11.11 },
        new SparkDataSource { x= 6, xval= "2011", yval= 11.05 },
        new SparkDataSource { x= 7, xval= "2012", yval= 10.94 },
        new SparkDataSource { x= 8, xval= "2013", yval= 12.11 },
        new SparkDataSource { x= 9, xval= "2014", yval= 11.87 }
    };


    public List<SparkDataSource> PopulationInSweden = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 9001774 },
        new SparkDataSource { x= 1, xval= "2006", yval= 9016596 },
        new SparkDataSource { x= 2, xval= "2007", yval= 9031088 },
        new SparkDataSource { x= 3, xval= "2008", yval= 9045389 },
        new SparkDataSource { x= 4, xval= "2009", yval= 9059651 },
        new SparkDataSource { x= 5, xval= "2010", yval= 9074055 },
        new SparkDataSource { x= 6, xval= "2011", yval= 9074055 },
        new SparkDataSource { x= 7, xval= "2012", yval= 9103788 },
        new SparkDataSource { x= 8, xval= "2013", yval= 9119423 },
        new SparkDataSource { x= 9, xval= "2014", yval= 9723809 }
    };

    public List<SparkDataSource> PopulationDensityInSweden = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 20.01 },
        new SparkDataSource { x= 1, xval= "2006", yval= 20.04 },
        new SparkDataSource { x= 2, xval= "2007", yval= 20.07 },
        new SparkDataSource { x= 3, xval= "2008", yval= 20.1 },
        new SparkDataSource { x= 4, xval= "2009", yval= 20.12 },
        new SparkDataSource { x= 5, xval= "2010", yval= 20.15 },
        new SparkDataSource { x= 6, xval= "2011", yval= 20.18 },
        new SparkDataSource { x= 7, xval= "2012", yval= 20.22 },
        new SparkDataSource { x= 8, xval= "2013", yval= 20.25 },
        new SparkDataSource { x= 9, xval= "2014", yval= 21.59 }
    };

    public List<SparkDataSource> PopulationGrowthRateInSweden = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= -1 },
        new SparkDataSource { x= 2, xval= "2007", yval= 0 },
        new SparkDataSource { x= 3, xval= "2008", yval= 0 },
        new SparkDataSource { x= 4, xval= "2009", yval= 0 },
        new SparkDataSource { x= 5, xval= "2010", yval= 0 },
        new SparkDataSource { x= 6, xval= "2011", yval= 0 },
        new SparkDataSource { x= 7, xval= "2012", yval= 1 },
        new SparkDataSource { x= 8, xval= "2013", yval= 1 },
        new SparkDataSource { x= 9, xval= "2014", yval= 1 }
    };

    public List<SparkDataSource> BirthRateInSweden = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 10.36 },
        new SparkDataSource { x= 1, xval= "2006", yval= 10.27 },
        new SparkDataSource { x= 2, xval= "2007", yval= 10.2 },
        new SparkDataSource { x= 3, xval= "2008", yval= 10.15 },
        new SparkDataSource { x= 4, xval= "2009", yval= 10.13 },
        new SparkDataSource { x= 5, xval= "2010", yval= 10.14 },
        new SparkDataSource { x= 6, xval= "2011", yval= 10.18 },
        new SparkDataSource { x= 7, xval= "2012", yval= 10.24 },
        new SparkDataSource { x= 8, xval= "2013", yval= 10.33 },
        new SparkDataSource { x= 9, xval= "2014", yval= 11.92 }
     };


    public List<SparkDataSource> PopulationInUK = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 60441460 },
        new SparkDataSource { x= 1, xval= "2006", yval= 60609150 },
        new SparkDataSource { x= 2, xval= "2007", yval= 60776240 },
        new SparkDataSource { x= 3, xval= "2008", yval= 60943910 },
        new SparkDataSource { x= 4, xval= "2009", yval= 61113200 },
        new SparkDataSource { x= 5, xval= "2010", yval= 62348450 },
        new SparkDataSource { x= 6, xval= "2011", yval= 62698360 },
        new SparkDataSource { x= 7, xval= "2012", yval= 63047160 },
        new SparkDataSource { x= 8, xval= "2013", yval= 63395580 },
        new SparkDataSource { x= 9, xval= "2014", yval= 63742980 }
    };

    public List<SparkDataSource> PopulationDensityInUK = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 246.88 },
        new SparkDataSource { x= 1, xval= "2006", yval= 247.57 },
        new SparkDataSource { x= 2, xval= "2007", yval= 248.25 },
        new SparkDataSource { x= 3, xval= "2008", yval= 248.93 },
        new SparkDataSource { x= 4, xval= "2009", yval= 250.86 },
        new SparkDataSource { x= 5, xval= "2010", yval= 255.94 },
        new SparkDataSource { x= 6, xval= "2011", yval= 257.37 },
        new SparkDataSource { x= 7, xval= "2012", yval= 258.8 },
        new SparkDataSource { x= 8, xval= "2013", yval= 260.23 },
        new SparkDataSource { x= 9, xval= "2014", yval= 261.66 }
    };

    public List<SparkDataSource> PopulationGrowthRateInUK = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= 0 },
        new SparkDataSource { x= 2, xval= "2007", yval= 0 },
        new SparkDataSource { x= 3, xval= "2008", yval= 0 },
        new SparkDataSource { x= 4, xval= "2009", yval= 0 },
        new SparkDataSource { x= 5, xval= "2010", yval= 1 },
        new SparkDataSource { x= 6, xval= "2011", yval= 0 },
        new SparkDataSource { x= 7, xval= "2012", yval= -1 },
        new SparkDataSource { x= 8, xval= "2013", yval= 0 },
        new SparkDataSource { x= 9, xval= "2014", yval= -1 }
    };

    public List<SparkDataSource> BirthRateInUK = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 10.78 },
        new SparkDataSource { x= 1, xval= "2006", yval= 10.71 },
        new SparkDataSource { x= 2, xval= "2007", yval= 10.67 },
        new SparkDataSource { x= 3, xval= "2008", yval= 10.65 },
        new SparkDataSource { x= 4, xval= "2009", yval= 10.65 },
        new SparkDataSource { x= 5, xval= "2010", yval= 12.34 },
        new SparkDataSource { x= 6, xval= "2011", yval= 12.29 },
        new SparkDataSource { x= 7, xval= "2012", yval= 12.27 },
        new SparkDataSource { x= 8, xval= "2013", yval= 12.26 },
        new SparkDataSource { x= 9, xval= "2014", yval= 12.22 }
    };

    public List<SparkDataSource> PopulationInUS = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 295734100 },
        new SparkDataSource { x= 1, xval= "2006", yval= 298444200 },
        new SparkDataSource { x= 2, xval= "2007", yval= 301139900 },
        new SparkDataSource { x= 3, xval= "2008", yval= 303824600 },
        new SparkDataSource { x= 4, xval= "2009", yval= 307212100 },
        new SparkDataSource { x= 5, xval= "2010", yval= 310232900 },
        new SparkDataSource { x= 6, xval= "2011", yval= 313232000 },
        new SparkDataSource { x= 7, xval= "2012", yval= 313847500 },
        new SparkDataSource { x= 8, xval= "2013", yval= 316668600 },
        new SparkDataSource { x= 9, xval= "2014", yval= 318892100 }
    };

    public List<SparkDataSource> PopulationDensityInUS = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 30.71 },
        new SparkDataSource { x= 1, xval= "2006", yval= 30.99 },
        new SparkDataSource { x= 2, xval= "2007", yval= 30.65 },
        new SparkDataSource { x= 3, xval= "2008", yval= 30.92 },
        new SparkDataSource { x= 4, xval= "2009", yval= 31.26 },
        new SparkDataSource { x= 5, xval= "2010", yval= 31.57 },
        new SparkDataSource { x= 6, xval= "2011", yval= 31.88 },
        new SparkDataSource { x= 7, xval= "2012", yval= 31.94 },
        new SparkDataSource { x= 8, xval= "2013", yval= 32.23 },
        new SparkDataSource { x= 9, xval= "2014", yval= 32.45 }
    };

    public List<SparkDataSource> PopulationGrowthRateInUS = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 1 },
        new SparkDataSource { x= 1, xval= "2006", yval= -1 },
        new SparkDataSource { x= 2, xval= "2007", yval= -1 },
        new SparkDataSource { x= 3, xval= "2008", yval= -1 },
        new SparkDataSource { x= 4, xval= "2009", yval= 1 },
        new SparkDataSource { x= 5, xval= "2010", yval= -1 },
        new SparkDataSource { x= 6, xval= "2011", yval= -1 },
        new SparkDataSource { x= 7, xval= "2012", yval= -1 },
        new SparkDataSource { x= 8, xval= "2013", yval= -1 },
        new SparkDataSource { x= 9, xval= "2014", yval= -1 }
    };

    public List<SparkDataSource> BirthRateInUS = new List<SparkDataSource> {
        new SparkDataSource { x= 0, xval= "2005", yval= 14.14 },
        new SparkDataSource { x= 1, xval= "2006", yval= 14.14 },
        new SparkDataSource { x= 2, xval= "2007", yval= 14.16 },
        new SparkDataSource { x= 3, xval= "2008", yval= 14.18 },
        new SparkDataSource { x= 4, xval= "2009", yval= 13.82 },
        new SparkDataSource { x= 5, xval= "2010", yval= 13.83 },
        new SparkDataSource { x= 6, xval= "2011", yval= 13.83 },
        new SparkDataSource { x= 7, xval= "2012", yval= 13.68 },
        new SparkDataSource { x= 8, xval= "2013", yval= 13.66 },
        new SparkDataSource { x= 9, xval= "2014", yval= 13.42 }
    };

}
